<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件库</title>
    <link rel="stylesheet" href="style.css">
    <style>
       
    </style>
</head>

<body>
    <!--居中弹窗dialog-->
    <div class="mask">
        <div class="dialog">
            <div class="dialog__hd">

            </div>
            <div class="dialog__bd">

            </div>
            <div class="dialog__ft">

            </div>
        </div>
    </div>
    <!--底部操作栏弹窗actionsheet-->
    <div class="mask">
        <div class="actionsheet">
            <div class="actionsheet__hd">

            </div>
            <div class="actionsheet__bd">

            </div>
            <div class="actionsheet__ft">

            </div>
        </div>
    </div>
    <!--居中提示toast-->
    <div class="toast">
        <div class="toast__content">
            <div class="toast__icon">图标或图片</div>
            <div class="toast__text">文字提示</div>
        </div>
    </div>

    <!--结果页msg-->
    <div class="msg">
        <div class="msg__icon"></div>
        <div class="msg__info">
            <div class="msg__title"></div>
            <div class="msg__text"></div>
        </div>
        <div class="msg__btn">

        </div>
        <div class="msg__tips">

        </div>
    </div>
    <!--提示条alert-->
    <div class="alert alert_success">
        <div class="alert__hd">

        </div>
        <div class="alert__bd">

        </div>
        <div class="alert__ft">

        </div>
    </div>
    <!--列表list-->
    <div class="lists">
        <div class="list">
            <div class="list__hd"></div>
            <div class="list__bd"></div>
            <div class="list__ft"></div>
        </div>
    </div>
    <!--列表cells-->
    <div class="cells">
        <div class="cell">
            <div class="cell__hd"></div>
            <div class="cell__bd"></div>
            <div class="cell__ft"></div>
        </div>
    </div>
    <!--切换栏tab-->
    <div class="tab">
        <div class="tab__item">选项一</div>
        <div class="tab__item">选项二</div>
        <div class="tab__item">选项三</div>
    </div>
</body>

</html>